<template>
  <div class="user">
    <div class="top">
      <el-card>
        <UserTop
          @handleSearchQuery="handleSearchQuery"
          @resetAndQueryList="resetAndQueryList"
        ></UserTop>
      </el-card>
    </div>
    <div class="bottom">
      <el-card>
        <UserBottom ref="userBottomIns" :searchData="searchData"></UserBottom>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UserTop from './components/user/UserTop.vue'

import UserBottom from './components/user/UserBottom.vue'
const userBottomIns = ref<InstanceType<typeof UserBottom>>()
const searchData = ref(null)
// 这里顶部搜索数据和底部数据展示需要联动，因此将处理操作放在父组件中进行
const handleSearchQuery = (data: any) => {
  userBottomIns.value?.fetchUserList(data)
  searchData.value = data
}

// 子组件清除表单内容，父组件触发事件同时获取最新列表数据
const resetAndQueryList = () => {
  userBottomIns.value?.fetchUserList()
}
</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  position: absolute;
}
.top,
.bottom {
  width: 100%;
}
.top {
  margin-bottom: 20px;
}
</style>
